<template>
	<view class="layout">
		<!-- 导航栏 -->
		<navgate-bar-vue :isBack="false" title="首页"></navgate-bar-vue>

		<!-- 搜索 -->
		<view class="search-layout">
			<view class="search">
				<img src="@/static/images/搜索.png" class="search-logo" />
				<input class="input" placeholder="请输入投票标题" v-model="topic" @input="onSearch" />
			</view>
		</view>

		<view class="vito-layout" v-for="(item, index) in rankingFrom" :key="index">
			<vito-vue :data="item"></vito-vue>
		</view>

		<uni-popup ref="NoticePopup" type="right">
			<view class="noticePopup-box">
				<view class="notice-title">通知公告</view>
				<scroll-view scroll-y>
					<view class="notice-conent-box" v-for="(item, index) in NotificationList" :key="index">
						<view class="notice-conent">
							{{item.content}}
						</view>
						<view class="notice-time">
							{{formatTime(item.createTime)}}
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		AppGetRankingInfoApi,
		AppGetNotificationAllApi
	} from '@/api/index';
	import {
		useUserStore
	} from '@/store';
	
	import {
		formatTime
	} from '@/utils/time';

	// 获取本地数据
	const userStore = useUserStore();

	const userId = ref(null);

	userId.value = userStore.id;

	// 定义 topic
	const topic = ref("");

	// 请求榜单数据
	const rankingFrom = ref([]);

	// 获取排行榜数据
	const getRankingInfo = async () => {
		const response = await AppGetRankingInfoApi(userId.value, topic.value);
		if (response && response.data) {
			rankingFrom.value = response.data;
		}
	};

	// 获取通知
	const NotificationList = ref([]);
	const NoticePopup = ref(false);


	const openNoticePopup = () => {
		if (NoticePopup.value) {
			NoticePopup.value.open('center');
		}
	};
	const GetNotificationAllInfo = async () => {
		const response = await AppGetNotificationAllApi();
		if (response && response.data) {
			NotificationList.value = response.data;
		}
	};

	// 监听输入事件并触发搜索
	const onSearch = () => {
		getRankingInfo();
	};

	// 页面加载时调用函数
	onMounted(() => {
		getRankingInfo();
	});
	onMounted(() => {
		GetNotificationAllInfo();
	});
	onMounted(() => {
		openNoticePopup();
	});
</script>


<style lang="scss" scoped>
	.layout {
		background-color: #fff;

		.search-layout {
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.search {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 720rpx;
				height: 80rpx;
				border-radius: 30rpx;
				background-color: #eee;

				.search-logo {
					width: 45rpx;
					height: 45rpx;
				}

				.input {
					margin-left: 15rpx;
					width: 500rpx;
				}
			}
		}

		.vito-layout {
			width: 95%;
			display: flex;
			justify-content: center;
			background-color: #f5f5f5;
			border-radius: 15rpx;
			margin: 20rpx auto;
			align-items: center;
			flex-direction: column;
		}

		.noticePopup-box {
			height: 60vh;
			width: 500rpx;
			background-color: #f5f5f5;
			border-radius: 15rpx;

			scroll-view {
				height: calc(60vh - 80rpx);
			}

			.notice-title {
				padding-top: 20rpx;
				display: flex;
				justify-content: center;
				font-weight: 700;
			}

			.notice-conent-box {
				margin: 20rpx auto;
				width: 400rpx;
				background-color: #fff;
				font-size: 20rpx;
				border-radius: 15rpx;
			}

			.notice-conent {
				padding: 10rpx;
			}

			.notice-time {
				display: flex;
				justify-content: flex-end;
				color: #999;
				padding: 10rpx;
			}
		}

	}
</style>